<template>
  <div class="page-msgbox">
    <h1 class="page-title">Message Box</h1>
    <div class="page-msgbox-wrapper">
      <mt-button @click.native="openAlert" size="large">打开 alert 提示框</mt-button>
      <mt-button @click.native="openConfirm" size="large">打开 confirm 提示框</mt-button>
      <mt-button @click.native="openPrompt" size="large">打开 prompt 提示框</mt-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue';
  import Button from 'mint-ui/lib/button';
  import 'mint-ui/lib/button/style.css';

  import Messagebox from 'mint-ui/lib/message-box';
  import 'mint-ui/lib/message-box/style.css';

  Vue.component(Messagebox.name,Messagebox)


  export default {
      methods: {
        openAlert() {
          Messagebox.alert('操作成功!', '提示');
        },

        openConfirm() {
          Messagebox.confirm('确定执行此操作?').then(action => {
              alert('确定执行了')
          });
        },

        openPrompt() {
          Messagebox.prompt(' ', '请输入姓名').then(({ value }) => {
            if (value) {
              Messagebox.alert(`你的名字是 ${ value }`, '输入成功');
            }
          });
        }
      }
    }
</script>
